<template>
  <div class="Verification2">
    <el-form
      :model="information"
      :rules="rules"
      label-position="top"
      label-width="80px"
      ref='form'
    >
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          v-model="information.phoneNumber"
          type="text"
          name="phoneNumber"
          readonly="readonly"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="verificationCode">
        <el-input
          v-model="information.verificationCode"
          type="text"
          name="verificationCode"
        >
          <template #append>
            <el-button @click="getCode">获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>
      <div class="submit">
        <!-- <input type="submit" value="下一步" @click="$emit('next2')" /> -->
        <input type="button" value="下一步" @click="submitForm" />
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import { FindPassword2Params, UserService } from "@/utils/api/user";
import { ElMessage } from 'element-plus';

export default defineComponent({
  props: {
    phoneNumber: String
  },
  setup(props, context) {
    const information: Ref<FindPassword2Params> = ref({
      phoneNumber: "",
      verificationCode: "",
    });
    information.value.phoneNumber = props.phoneNumber as string;
     const getCode = () => {
      UserService.getCode({phoneNumber: information.value.phoneNumber})
          .then((res) => {
            console.log(res.data);
            if (res.data.a == 11) {
              openError('验证码发送失败，请检查手机号！');
            } else  if (res.data.a == 12) {
               ElMessage({
                showClose: true,
                message: '验证码发送成功',
                type: 'success',
                offset: 200,
              }); 
            } else {
              openError('获取验证码出错，请联系管理员！');
            }
          })
          .catch((error) => {
            console.log(error);
          });
    }
    //自定义表单验证
    const form = ref(null);
    const submitForm = () => {
      let flag;
      (form.value as any).validate((valid: boolean) => {
        flag = valid;
      });
      if (flag === true) {
        UserService.findPassword2(information.value)
          .then((res) => {
            console.log(res.data);
            if (res.data.a == 100) {
               context.emit("next2");
            } else if (res.data.a == 1) {
              openError('请先发送验证码');
            } else if (res.data.a == 13) {
              openError('验证码输入错误！');
            } else {
              openError('出错了，请联系管理员！');
            } 

          })
          .catch((error) => {
            console.log(error);
          });
      }
    };
    const checkPhoneNumber = (rule: any, value: any, callback: any) => {
       if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      let r =/^\d{11}$/;
      if (!r.test(value)) {
        return callback(new Error("手机号应该为11位数字"));
      }
      callback();
    };
    const checkVerificationCode = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      callback();
    };
    const rules = {
      phoneNumber: [{ validator: checkPhoneNumber, trigger: "submit" }],
      verificationCode: [{ validator: checkVerificationCode, trigger: "submit" }],
    };
    const openError= (inf: string) => {
          ElMessage({
            showClose: true,
            message: inf,
            type: 'error',
            offset: 200,
          });
    };  
    return {
      information,
      submitForm,
      form,
      getCode,
      rules,
      openError,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/config.scss";
.el-button {
  width: 100px;
  padding-left: 15px;
}
.el-form-item {
  text-align: left;
}
.el-input {
  width: 320px;
}
:deep(.el-input__inner[name="verificationCode"]) {
  width: 220px;
}
div.submit {
  text-align: left;
}
input[type="button"] {
  cursor: pointer;
  background: $themeRed;
  color: white;
  padding: 15px 0;
  letter-spacing: 8px;
  text-indent: 8px;
  width: 320px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 6px;
}
</style>

